<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link rel="stylesheet" href="css/table1.css">
    <link rel="stylesheet" href="css/mulu.css">
    <link rel="stylesheet" href="css/element.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/0_common/bootstrap-table.css">
    <script src="css/jquery.min.js"></script>
    <script src="css/vue.js"></script>
    <script src="css/element.js"></script>
    <script src="js/table.js"></script>
    <script src="js/0_common/bootstrap.min.js"></script>
    <script src="js/0_common/bootstrap-table.js"></script>
    <script src="js/constants.js"></script>
    <script src="js/YZidCard.js"></script>
    <script src="lib/viewer.js"></script>
    <link rel="stylesheet" href="lib/viewer.css">
</head>
<style>
    #qyFailTotal, #qyTotal,#lyWaitCheckTotal ,#yqTotal{
        /*width: 16.6%;*/
        height: 12%;
        text-align: center;
        font-size: 18px;
        float: left;
        background-color: white;
        box-shadow:0px 0px 10px 0px rgba(204,204,204,0.2);
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin-top: 1.5%;
        margin-left: 2%;
    }
    #look{
        height: 50%;
        margin-top: 0.8%;
        float: left;
        margin-left: 4%;
        cursor: pointer;
    }
    #yulan{
        height: 50%;
        margin-top: 0.8%;
        float: left;
        margin-left: 4%;
        cursor: pointer;
    }
    #img-previewer-container {
        width: 100%;
        height: 100%;
    }
    #img-preview {
        width: 100%;
        height: 100%;
    }
</style>
<body>
<div class="dqy" style="height: 30px;margin-bottom: 10px;position: absolute"><span>当前页：员工管理</span></div>
<div id="dhmenu" style="height: 48px;margin-top: 10px;">
<!--    <div id="import" onclick="selectFile()"  style="margin-left: 2%"><div class="caozuobox"><img src="img/table/import.png"></div><div class="caozuobox"><span>导入</span></div></div>-->
    <div id="look"><div class="caozuobox"><img src="img/table/person.png"></div><div class="caozuobox"><span>查看</span></div></div>
   <!-- <div id="yulan"><div class="caozuobox"><img src="img/table/chaxun.png"></div><div class="caozuobox"><span>预览附件</span></div></div>-->
    <div id="export"><div class="caozuobox"><img src="img/table/export.png"></div><div class="caozuobox"><span>导出</span></div></div>
    <button id="btn_search"></button>
    <input id="key" class="form-control" style="width:15%;height:23px;float:right;margin-top:0.8%;margin-right: 2%"/>
</div>
<div id="dhmenu1" style="height: 8%;margin-top: 10px;">
    <div id="qyFailTotal" onclick="refresh('')"><img src="./img/fg.png" alt=""><div style="font-size: 15px" >&nbsp;&nbsp;企业复工人数&nbsp;&nbsp;<span id="qyFailNumber" style="color: #51a9cc;font-weight: bold;font-size: 22px;">0</span></div></div>
    <div id="qyTotal" onclick="refresh('likai')"><img src="./img/yq.png" alt=""><div style="font-size: 15px" >&nbsp;&nbsp;近14天离开过苏州的复工人数&nbsp;&nbsp;<span id="qyNumber" style="color: #51a9cc;font-weight: bold;font-size: 22px;">0</span></div></div>
    <div id="lyWaitCheckTotal"  onclick="refresh('yujing')"><img src="./img/14t.png" alt=""><div style="font-size: 15px">近14天接触过重点疫区复工人数&nbsp;<span id="lyWaitCheckNumber" style="color: #ffc02a;font-weight: bold;font-size: 22px;">0</span></div></div>
    <div id="yqTotal"  onclick="refresh('yqfugong')" ><img src="./img/yq.png" alt=""><div style="font-size: 15px" >&nbsp;&nbsp;重点疫区复工人数&nbsp;&nbsp;<span id="yqNumber" style="color: #51a9cc;font-weight: bold;font-size: 22px;">0</span></div></div>
</div>
<div id="mainbox1">
    <div id="titlebox"><span>员工信息报备</span></div>
    <div id="tabletopbox">
        <div class="tishibox"><img src="img/tishi.png"></div>
        <div class="tishibox"><span style="margin-left: 10px">查询结果(共</span><span id="number"></span><span>条信息)</span></div>
    </div>
    <div id="tablebox">
        <table id="table"
               data-toolbar="#toolbar"
               data-show-export="true"
               data-pagination="false"
               data-page-list="[10, 25, 50, 100, ALL]"
               data-id-field="id"
               data-side-pagination="server"
               data-url="../action"
               data-query-params="queryParams"
               data-query-params-type="limit">
        </table>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 70vw;">
    <div class="modal-dialog" style="width: 70vw">
        <div class="modal-content" style="border-radius: 15px;width: 100%;">
            <div class="modal-header" style="background-color:white;color: black;border-top-left-radius: 15px;border-top-right-radius: 15px">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
                    &times;
                </button>
                <h4 class="modal-title">员工信息查看</h4>
            </div>

            <div class="modal-body" style="width: 100%;float:left;background-color: #F3F3F3;height: auto" id="xq1">
                <div class="hang">
                    <span class="hangtitle">员工姓名</span><br>
                    <input id="name" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">所在企业</span><br>
                    <input id="qyname" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">复工时间</span><br>
                    <input id="fgshijian" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">是否属于外籍</span><br>
                    <input id="sfwaiji" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">身份证/护照</span><br>
                    <input id="idcard" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">户籍所在地</span><br>
                    <input id="huji" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">苏州现住地址</span><br>
                    <input id="address" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">近14天是否离开苏州</span><br>
                    <input id="sflikai" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">近14天是否到过或途径湖北全省各市；浙江省温州市；河南省信阳市；安徽省阜阳市</span><br>
                    <input id="sfyujing" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">是否接触确诊或疑似病例</span><br>
                    <input id="sfjiechu" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">是否接触野生动物</span><br>
                    <input id="sfyeshen" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">健康状况（有、无发热、咳嗽、乏力、腹泻等）</span><br>
                    <input id="jkzhuankuang" class="hanginput" disabled/>
                </div>
                <div class="hang">
                    <span class="hangtitle">说明（离苏人员填写前往地点、交通工具）等信息</span><br>
                    <input id="beizhu" class="hanginput" disabled/>
                </div>
                <div class="hangz" style="margin-left: 5%">
                    <span class="hangtitle">证明材料（运营商行动轨迹证明或社区出具的解除隔离证明）</span><br>
                    <input id="fujian" class="hanginputz" style="width:90%;display: inline-block" disabled/>
                    <button class="btn btn-primary" style="width:8%;display: inline-block;margin-top:1%;margin-left: 2%" id="yulan">在线预览</button>
                </div>
            </div>
            <div class="modal-footer" style="text-align: center">
                <button id="close" class="btn">关闭</button>
            </div>
            <div id="img-preview" style="display: none"></div>
        </div>
    </div>
</div>

</body>
<script>
    var svcHeader = Constants.path
    var file = svcHeader+"FUGONGP/";
    var zhen = localStorage.getItem('zhen');
    var qu = localStorage.getItem('qu');
    var user = JSON.parse(localStorage.getItem("user"));
    var searchVal = "";
    var fugongTatal = { "pageNo":0, "pageSize":10};
    var likaiTotal = { "pageNo":0, "pageSize":10,"sflikai":'是'};
    var yujingTotal = { "pageNo":0, "pageSize":10,"sfyujing":'是'};
    var yqFugong = {"pageNo":0, "pageSize":10,"yqfugong":"是"};
    if(user.level=="1"){

    }else if (user.level =="2"){
        if(user.qu){

        }
    }else if(user.level == "3"){
        if(user.qu){

        }
        if(user.zhen){
            fugongTatal.street = user.zhen;
            likaiTotal.street = user.zhen;
            yujingTotal.street = user.zhen;
            yqFugong.street = user.zhen;
        }

    }else if(user.level == "4"){
        fugongTatal.louyu = user.name;
        likaiTotal.louyu = user.name;
        yujingTotal.louyu = user.name;
        yqFugong.louyu = user.name;
    }

    $(function () {
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();
        //
        // //2.初始化Button的点击事件
        // var oButtonInit = new ButtonInit();
        // oButtonInit.Init();
        statistics();
    });

    function statistics(){
        $.ajax({
            url: svcHeader + "pb/ygxxs/action/findByKeyAndStreet",
            dataType: 'json',
            type: 'get',
            data: fugongTatal,
            success: function (data) {
                $("#qyFailNumber").text(data.data.count);
            },
        });
        $.ajax({
            url: svcHeader + "pb/ygxxs/action/findByKeyAndStreet",
            dataType: 'json',
            type: 'get',
            data: likaiTotal,
            success: function (data) {
                $("#qyNumber").text(data.data.count);
            },
        });
        $.ajax({
            url: svcHeader + "pb/ygxxs/action/findByKeyAndStreet",
            dataType: 'json',
            type: 'get',
            data: yujingTotal,
            success: function (data) {
                $("#lyWaitCheckNumber").text(data.data.count);
            },
        });
        $.ajax({
            url: svcHeader + "pb/ygxxs/action/findByKeyAndStreet",
            dataType: 'json',
            type: 'get',
            data: yqFugong,
            success: function (data) {
                $("#yqNumber").text(data.data.count);
            },
        });
    }
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#table').bootstrapTable({
                url: svcHeader+'pb/ygxxs/action/findByKeyAndStreet',         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                // search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                // strictSearch: true,
                // showColumns: true,                  //是否显示所有的列
                // showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                // showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                responseHandler:responseHandler,
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'name',
                        align: 'center',
                        title: '员工姓名',
                        formatter : function(value, row, index) {
                            var a = "";
                            if(row.fujian) {
                                a ="<span style='color:red;font-weight: bold'>"+value+"</span>"
                            }else{
                                a = value;
                            }
                            return a;
                        },
                    },{
                        field: 'qyname',
                        align: 'center',
                        title: '所在企业',
                        formatter : function(value, row, index) {
                            var a = "";
                            if(row.fujian) {
                                a ="<span style='color:red;font-weight: bold'>"+value+"</span>"
                            }else{
                                a = value;
                            }
                            return a;
                        },
                    }, {
                        field: 'phone',
                        align: 'center',
                        title: '手机号码',
                        formatter : function(value, row, index) {
                            var a = "";
                            if(row.fujian) {
                                a ="<span style='color:red;font-weight: bold'>"+value+"</span>"
                            }else{
                                a = value;
                            }
                            return a;
                        },
                    },{
                        field: 'idcard',
                        align: 'center',
                        title: '身份证号码/护照',
                        formatter : function(value, row, index) {
                            var a = "";
                            if(row.fujian) {
                                a ="<span style='color:red;font-weight: bold'>"+value+"</span>"
                            }else{
                                a = value;
                            }
                            return a;
                        },
                    },{
                        field: 'huji',
                        align: 'center',
                        title: '户籍地址',
                        formatter : function(value, row, index) {
                            var a = "";
                            if(row.fujian) {
                                a ="<span style='color:red;font-weight: bold'>"+value+"</span>"
                            }else{
                                a = value;
                            }
                            return a;
                        },
                    },{
                        field: 'address',
                        align: 'center',
                        title: '居住地址',
                        formatter : function(value, row, index) {
                            var a = "";
                            if(row.fujian) {
                                a ="<span style='color:red;font-weight: bold'>"+value+"</span>"
                            }else{
                                a = value;
                            }
                            return a;
                        },
                    },{
                        field: 'fgshijian',
                        align: 'center',
                        title: '复工时间',
                        formatter : function(value, row, index) {
                            var a = "";
                            if(row.fujian) {
                                a ="<span style='color:red;font-weight: bold'>"+value+"</span>"
                            }else{
                                a = value;
                            }
                            return a;
                        },
                    },
                ],
            });
            initTableHeight()
        }
        oTableInit.queryParams = function (params) {
            if( $("#key").val()){
                fugongTatal.key = $("#key").val();
                likaiTotal.key = $("#key").val();
                yujingTotal.key = $("#key").val();
                yqFugong.key = $("#key").val();
            }else{
                delete  fugongTatal.key;
                delete  likaiTotal.key;
                delete  yujingTotal.key;
                delete  yqFugong.key;
            }
            statistics();
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageNo:params.offset/params.limit+1,
                pageSize:params.limit,

               // street:zhen
            };
            if($("#key").val()){
                temp.key = $("#key").val();
            }
            if(zhen){
                temp.street=zhen
            }
            if(user.level==4){
                temp.louyu = user.name
            }
            if(searchVal){
                if(searchVal=='likai'){
                    temp.sflikai = '是'
                }else if (searchVal == 'yujing'){
                    temp.sfyujing = '是'
                }else if (searchVal == 'yqfugong'){
                    temp.yqfugong = '是'
                }
            }
            return temp;

        };
        return oTableInit;
    };
    function   responseHandler(res) {
        $("#number").text(res.data.count)
        return {
            "rows": res.data.entities,
            "total":res.data.count
            //数据
        }
    }
   /* $.ajax({
        url: svcHeader + "pb/qysqbs/countzd10ByQu",
        dataType: 'json',
        type: 'get',
        success: function (data) {
            var data=data.data;
            var a=0;
            for(var i=0;i<data.length;i++){
                a+=Number(data[i].count)
            }
            $("#qyNumber").text(a);
        },
    });
    $.ajax({
        url: svcHeader + "pb/ryxx/countsflkByQuOrZhen",
        dataType: 'json',
        type: 'get',
        data:{
            zhen:zhen,
        },
        success: function (data) {
            $("#lyWaitCheckNumber").text(data.data);
        },
    });*/
    $("#look").unbind('click').click(function(){
        var row = $.map($('#table').bootstrapTable(
            'getSelections'), function(row) {
            return row;
        });
        if(row.length==1) {
            $("#myModal").modal('show');
            $("#name").val(row[0].name);
            $("#qyname").val(row[0].qyname);
            $("#sfwaiji").val(row[0].sfwaiji);
            $("#idcard").val(row[0].idcard);
            $("#phone").val(row[0].phone);
            $("#huji").val(row[0].huji);
            $("#address").val(row[0].address);
            $("#sflikai").val(row[0].sflikai);
            $("#sfyujing").val(row[0].sfyujing);
            $("#sfjiechu").val(row[0].sfjiechu);
            $("#sfyeshen").val(row[0].sfyeshen);
            $("#jkzhuankuang").val(row[0].jkzhuankuang);
            $("#beizhu").val(row[0].beizhu);
            $("#fgshijian").val(row[0].fgshijian);
            $("#fujian").val(row[0].fujian)
        }else{
            alert("只能选择一条")
        }
    });
    $("#yulan").unbind('click').click(function(){
        var row = $.map($('#table').bootstrapTable(
            'getSelections'), function(row) {
            return row;
        });
        if(row.length==1) {
            var fileName = row[0].fujian;
            console.log(fileName)
            if(fileName==""||fileName==null){
                console.log("bbb")
                alert('未上传证明材料')
            }else{
                previewImg(fileName)
            }

        }else{
            alert("只能选择一条")
        }
    });
    $("#close").unbind('click').click(function () {
        $("#myModal").modal('hide');
    })


    $("#btn_search").unbind('click').click(function () {
        $("#table").bootstrapTable('destroy');
        var oTable = new TableInit();
        oTable.Init();
    })

    $("#export").click(function () {
        window.location.href=svcHeader+"ygxxs/export"
    })
    function selectFile(){
        $("#excelFile").trigger("click");
    }
    function fileUpload() {
        var file=document.getElementById("excelFile");
        var fileObj = file.files[0];
        var formdata = new FormData();
        formdata.append('file',fileObj);
        // formdata.append('qyid',qyid);
        //console.log(formdata)
        $.ajax({
            url: svcHeader + "ygxxs/import",//这里写你的url
            type: 'POST',
            data:formdata,
            processData:false,
            contentType:false,
            success: function (map) {
                alert("上传成功!");
                $("#table").bootstrapTable('refresh');
            },
            error: function (data) {
                alert("页面请求失败！");
            }
        })
    }
    function refresh(val) {
        searchVal = val;
        $("#table").bootstrapTable('refresh');
    }
    function previewImg(fileName) {
        if (!fileName) {
            return;
        }
        if (/(.*)\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$/.test(fileName)) {
            var html = "<ul id='img-previewer-container'><li><img src='" + file + fileName + "' alt=''></li></ul>";
            $("#img-preview").html(html);
            var viewer = new Viewer(document.getElementById("img-previewer-container"), {
                inline: false,
                url: 'data-original',
                zoomRatio: 0.4,
                button: true,
                title: false,
                keyboard: false,
                toolbar: {
                    zoomIn: 1,
                    zoomOut: 1,
                    oneToOne: 1,
                    reset: 1,
                    prev: 0,
                    play: 0,
                    next: 0,
                    rotateLeft: 1,
                    rotateRight: 1,
                    flipHorizontal: 1,
                    flipVertical: 1,
                }
            });
            viewer.view(0);
        } else {
            window.open(file + fileName);
        }
    }
</script>

</html>